<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>柜子信息详情页</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <!-- 样式 -->
    <link rel="stylesheet" href="../../css/style.css"/>
    <!-- 主题（主要颜色设置） -->
    <link rel="stylesheet" href="../../css/theme.css"/>
    <!-- 通用的css -->
    <link rel="stylesheet" href="../../css/common.css"/>
    <link rel="stylesheet" href="../../xznstatic/css/bootstrap.min.css">
</head>
<style>
    .particulars {
        width: 90%;
        background-color: #fff;
        border-bottom: 1px dotted var(--publicMainColor);
        padding: 10px 0;
    }

    .dataExhibition {
        display: inline-block;
        width: 60%;
    }

    .displayBianhao {
        display: inline-block;
        width: 20%;
    }

    .detail-tab .layui-tab-card > .layui-tab-title .layui-this {
        border: 2px dotted var(--publicMainColor);
        background-color: #fff;
        color: #000;
    }</style>
<body>

<div id="app">
    <div style="width: 1000px;margin: 10px auto;height: auto;">
        <div style="border: 1px  dotted var(--publicMainColor);border-radius: 15px;margin-top:25px;height: 50px;line-height: 50px;padding-left: 15px;display: flex;justify-content: space-between;align-items: center;padding-right: 15px;">
        <span>
            <a style="color: #000;" href="../home/home.html">
                首页
            </a>/
            <a>
                <cite style="color: #815476;">
                    {{title}}
                </cite>
            </a>
        </span>
        </div>
        <div style="display: flex;margin-top: 20px;">
            <!-- 详情介绍 -->
            <div style="width: 50%;height: auto;">
                <div class="particulars" style="text-align: center;font-size: 18px;">
                    <span>{{title}}</span>
                </div>
                <div v-if="detail.guizhiUuidNumber" class="particulars">
                    <span class="displayBianhao">柜子编号:</span>
                    <span class="dataExhibition"> {{detail.guizhiUuidNumber}} </span>
                </div>
                <div v-if="detail.guizhiTypes" class="particulars">
                    <span class="displayBianhao">柜子类型:</span>
                    <span class="dataExhibition"> {{detail.guizhiValue}} </span>
                </div>
                <div v-if="detail.guizhiAddress" class="particulars">
                    <span class="displayBianhao">柜子地址:</span>
                    <span class="dataExhibition"> {{detail.guizhiAddress}} </span>
                </div>
                <div v-if="detail.guizhiNewMoney" class="particulars">
                    <span class="displayBianhao">价格:</span>
                    <span class="dataExhibition"> {{detail.guizhiNewMoney}} </span>
                </div>
                <div v-if="detail.statusTypes" class="particulars">
                    <span class="displayBianhao">柜子状态:</span>
                    <span class="dataExhibition"> {{detail.statusValue}} </span>
                </div>
            </div>
            <!-- 图片 -->
            <div style="width: 50%;height: auto;">
                <div>
                    <div v-if="swiperList.length" v-for="(item,index) in swiperList" :key="index">
                        <img style="width: 100%;height: 100%;object-fit:cover;" :src="baseUrl+item"/>
                    </div>
                </div>
            </div>
        </div>
        <!-- 按钮 -->
        <div style="width: 100%;" v-if="detail.statusTypes == 2">
            <div style="display: flex;margin-top: 30px;justify-content: center;border-bottom:1px dotted var(--publicMainColor) ;border-top:1px dotted var(--publicMainColor) ;padding: 20px;align-items: center;">
                <button  @click="guizhiYuyueModal=true" style="height:auto;"
                        :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.3)","margin":"0 5px","borderColor":"rgba(0,0,0,.3)","backgroundColor":"rgba(23, 124, 176, 1)","color":"rgba(255, 255, 255, 1)","borderRadius":"6px","borderWidth":"0","width":"auto","lineHeight":"40px","fontSize":"16px","borderStyle":"solid"}'
                        type="button" class="layui-btn btn-submit">
                    立即物品存储
                </button>
                <!--
                 <button @click="guizhiYuyue()" style="height:auto;" :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.3)","margin":"0 5px","borderColor":"rgba(0,0,0,.3)","backgroundColor":"rgba(23, 124, 176, 1)","color":"rgba(255, 255, 255, 1)","borderRadius":"6px","borderWidth":"0","width":"auto","lineHeight":"40px","fontSize":"16px","borderStyle":"solid"}' type="button" class="layui-btn btn-submit">
                     立即预约
                 </button>
            -->
            </div>
        </div>

        <!-- 视频 -->


        <!-- 评论 -->
        <div class="layui-row detail-tab" style="border: none;box-shadow: none;">
            <div class="layui-tab layui-tab-card" style="overflow: hidden;border: none; box-shadow: none;">
                <ul class="layui-tab-title " :style='{"backgroundColor":"#fff","fontSize":"14px"}'
                    style="color: var(--publicMainColor);border: none;">
                    <li class="layui-this">柜子详情</li>
                    <li></li>
                </ul>

                <div class="layui-tab-content"
                     style="border: 1px dotted var(--publicMainColor);border-radius: 15px;margin-top: 10px;margin-bottom: 50px;">
                    <div class="layui-tab-item layui-show">
                        <div v-html="myFilters(detail.guizhiContent)"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 预约和报名模态框 -->
    <el-dialog title="物品存储" :visible.sync="guizhiYuyueModal" :modal-append-to-body="false">
        <el-form>
            <el-form-item label="存放时间">
                <el-date-picker
                        v-model="guizhiYuyueTime"
                        type="datetime"
                        placeholder="选择时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="请选择物品大小">
                <el-select v-model="guizhiYuyueTypes" placeholder="请选择物品大小">
                    <el-option
                            v-for="(item,index) in guizhiYuyueTypesList"
                            v-bind:key="index"
                            :label="item.indexName"
                            :value="item.codeIndex">
                        <!--lable是要展示的名称-->
                        <!--value是值-->
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="备注">
                <el-input type="textarea" v-model="guizhiYuyueText"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="guizhiYuyueModal = false">关 闭</el-button>
            <el-button type="primary" @click="submitGuizhiYuyue()">提 交</el-button>
        </div>
    </el-dialog>
</div>


<script src="../../layui/layui.js"></script>
<script src="../../js/vue.js"></script>
<!-- 引入element组件库 -->
<script src="../../xznstatic/js/element.min.js"></script>
<!-- 引入element样式 -->
<link rel="stylesheet" href="../../xznstatic/css/element.min.css">
<!-- 组件配置信息 -->
<script src="../../js/config.js"></script>
<!-- 扩展插件配置信息 -->
<script src="../../modules/config.js"></script>
<!-- 工具方法 -->
<script src="../../js/utils.js"></script>

<script>
    Vue.prototype.myFilters = function (msg) {
        if (msg != null) {
            return msg.replace(/\n/g, "<br>");
        } else {
            return "";
        }
    };
    var vue = new Vue({
        el: '#app',
        data: {
            //当前登录用户信息
            user: {},
            // 轮播图
            swiperList: [],//用于当前表的图片
            // 数据详情
            detail: {
                id: 0
            },
            // 商品标题
            title: '',
            totalScore: 0,//评分
            baseUrl: "",//路径
            storeupFlag: 0,//收藏 [0为收藏 1已收藏]
            //系统推荐
            guizhiRecommendList: [],
            guizhiYuyueTypesList: [],
            // 当前详情页表
            detailTable: 'guizhi',
            //物品存储
            guizhiYuyueModal: false,
            guizhiYuyueText: "",
            guizhiYuyueTypes:1,
            guizhiYuyueTime: new Date(),
        },
        methods: {
            //分享
            share() {
                let element = createElement("http://localhost:8080/xiangbaocunchuxitong/front/index.html?url=" + "./pages/guizhi/detail.html?id=" + this.id);
                element.select();
                element.setSelectionRange(0, element.value.length);
                document.execCommand('copy');
                element.remove();
                layui.layer.msg('复制分享页面成功,快去分享吧!', {time: 2000, icon: 6});
            },

            jump(url) {
                jump(url)
            },
            isAuth(tablename, button) {
                return isFrontAuth(tablename, button)
            },
            //预约
            guizhiYuyue() {
                let _this = this;
                // localStorage.setItem('guizhiId', _this.detail.id);
                // _this.jump("../guizhiOrder/add.html");

                let data = {
                    guizhiId: _this.detail.id,
                    yonghuId: localStorage.getItem("userid"),
                    guizhiOrderYesnoTypes: 1,
                }
                // 提交数据
                layui.http.requestJson('guizhiOrder/add', 'post', data, function (res) {
                    if (res.code == 0) {
                        layui.layer.msg('预约成功', {
                            time: 2000,
                            icon: 6
                        }, function () {
                            _this.jump("../guizhiOrder/list.html");
                        });
                    } else {
                        layui.layer.msg(res.msg, {
                            time: 5000,
                            icon: 5
                        });
                    }
                });
            },
            //提交物品存储
            submitGuizhiYuyue() {
                let _this = this;

                let data = {
                    guizhiId: _this.detail.id, // 当前表id
                    yonghuId: localStorage.getItem("userid"),// 物品存储人
                    guizhiYuyueContent: _this.guizhiYuyueText,
                    guizhiYuyueTypes: _this.guizhiYuyueTypes,
                    zhuangtaiTypes:1,
                    guizhiYuyueTime: getDatetimeFormat(_this.guizhiYuyueTime),
                }
                // 提交数据
                layui.http.requestJson('guizhiYuyue/add', 'post', data, function (res) {
                    if (res.code == 0) {
                        layui.layer.msg('物品存储成功', {
                            time: 2000,
                            icon: 6
                        }, function () {
                            _this.jump("../guizhiYuyue/list.html");
                        });
                    } else {
                        layui.layer.msg("已经预约过了,无法重复预约", {
                            time: 5000,
                            icon: 5
                        });
                    }
                });
            },
        }
    });

    layui.use(['layer', 'form', 'element', 'carousel', 'http', 'jquery', 'laypage', 'util'], function () {
        var layer = layui.layer;
        var util = layui.util;
        var element = layui.element;
        var form = layui.form;
        var carousel = layui.carousel;
        var http = layui.http;
        var jquery = layui.jquery;
        var laypage = layui.laypage;
        vue.baseUrl = http.baseurl

        localStorage.setItem("goUtl", "./pages/guizhi/detail.html?id=" + http.getParam('id'))

        var limit = 10;

        let table = localStorage.getItem("userTable");
        if (table) {
            http.request(table + "/session", 'get', {}, function (data) {
                vue.user = data.data;
            });
        }

        // 数据ID
        var id = http.getParam('id');
        vue.detail.id = id;
        // 数据信息
        http.request(`${vue.detailTable}/detail/` + id, 'get', {}, function (res) {
            // 详情信息
            vue.detail = res.data;
            vue.title = vue.detail.guizhiName;
            vue.detail.guizhiContent = vue.detail.guizhiContent.replaceAll("src=\"upload/", "src=\"" + vue.baseUrl + "upload/");
            // 轮播图片
            vue.swiperList = vue.detail.guizhiPhoto ? vue.detail.guizhiPhoto.split(",") : [];
            // 轮播图
            vue.$nextTick(() => {
                carousel.render({
                    elem: '#swiper',
                    width: '420px',
                    height: '400px',
                    arrow: 'hover',
                    anim: 'default',
                    autoplay: 'true',
                    interval: '3000',
                    indicator: 'inside'
                });
            });

        });
        http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=guizhi_yuyue_types", 'get', {}, function (res) {
            if (res.code == 0) {
                vue.guizhiYuyueTypesList = res.data.list;
            }
        });


        // 系统推荐
        http.request(`guizhi/list`, 'get', {
            page: 1,
            limit: 5,
            guizhiTypes: vue.detail.guizhiTypes,
            guizhiDelete: 1,
            statusTypes: vue.detail.statusTypes,
        }, function (res) {
            vue.guizhiRecommendList = res.data.list;
        });

    });
</script>
</body>
</html>
